{% extends 'base.html' %}

{% block content %}
<style>
    body {
        background-image: url("{% static 'bj.jpg' %}");
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        opacity: 0.7;
    }
</style>
<div class="container-fluid vh-100 d-flex align-items-start justify-content-center">
  <div class="card" style="width: 25rem; background-color: #171064; margin-top: 10vh;">
    <div class="card-body">
      <h2 class="card-title text-center mb-4 text-white">登录</h2>
      {% if error_message %}
      <div class="alert alert-danger" role="alert">
        {{ error_message }}
      </div>
      {% endif %}
      <form method="post">
        {% csrf_token %}
        <div class="form-group mb-3">
          <label for="username" class="form-label text-white">用户名：</label>
          <input type="text" class="form-control" id="username" name="username" required>
        </div>
        <div class="form-group mb-3">
          <label for="password" class="form-label text-white">密码：</label>
          <input type="password" class="form-control" id="password" name="password" required>
        </div>
        <button type="submit" name="login_submit" class="btn btn-primary w-100"><i class="bi bi-box-arrow-in-right me-2"></i>登录</button>
      </form>
      <hr>
      <form method="post">
        {% csrf_token %}
        <div class="form-group mb-3">
          <label for="email" class="form-label text-white">邮箱：</label>
          <input type="email" class="form-control" id="email" name="email" required>
        </div>
        <button type="submit" name="forgot_password_submit" class="btn btn-secondary w-100"><i class="bi bi-key me-2"></i>找回密码</button>
      </form>
    </div>
  </div>
</div>
{% endblock %}